import 'package:flutter/material.dart';

class BaseComponent extends StatefulWidget {
  const BaseComponent({super.key});

  @override
  State<BaseComponent> createState() => _BaseComponentState();
}

class _BaseComponentState extends State<BaseComponent> {
  int _selectedRadio = 0;
  final Map<String, bool> _checkboxValues = {
    '选项1': false,
    '选项2': false,
    '选项3': false,
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('基础组件')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 按钮组
            _buildButtonSection(),
            const SizedBox(height: 20),

            // 图片展示
            _buildImageSection(),
            const SizedBox(height: 20),

            // 单选组
            _buildRadioSection(),
            const SizedBox(height: 20),

            // 多选组
            _buildCheckboxSection(),
          ],
        ),
      ),
    );
  }

  // 按钮实现
  Widget _buildButtonSection() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Text('按钮：'),
        TextButton(
          onPressed: () {},
          child: const Text("TextButton"),
        ),
        ElevatedButton(
          onPressed: () => debugPrint('ElevatedButton被点击'),
          child: const Text("ElevatedButton"),
        ),
        OutlinedButton(
          onPressed: () {},
          child: const Text("OutlinedButton"),
        ),
      ],
    );
  }

  // 图片实现
  Widget _buildImageSection() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        Text('图片：'),
        Icon(Icons.image),
        SizedBox(width: 10),
        Image(
          image: AssetImage("images/icon.png"),
          width: 100.0,
        ),
      ],
    );
  }

  // 单选实现
  Widget _buildRadioSection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("单选："),
        Row(
          children: [
            Radio(
              value: 0,
              groupValue: _selectedRadio,
              onChanged: (value) => setState(() => _selectedRadio = value!),
            ),
            const Text("选项A"),
            Radio(
              value: 1,
              groupValue: _selectedRadio,
              onChanged: (value) => setState(() => _selectedRadio = value!),
            ),
            const Text("选项B"),
          ],
        )
      ],
    );
  }

  // 多选实现
  Widget _buildCheckboxSection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("多选："),
        ..._checkboxValues.entries.map((entry) {
          return Row(
            children: [
              Checkbox(
                value: entry.value,
                onChanged: (value) {
                  setState(() {
                    _checkboxValues.update(entry.key, (v) => value!);
                  });
                },
              ),
              Text(entry.key),
            ],
          );
        }).toList()
      ],
    );
  }
}
